<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1px" cellspacing="0" width="80%">
    <thead>
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>

    </tbody>

</table>

<script>
    // 发送异步请求   从后台获取需要渲染的数据 ajax  http请求
    let students = [
        {
            id: 1,
            name: 'zhangsan',
            age: 20
        }, {
            id: 2,
            name: 'lisi',
            age: 20
        }, {
            id: 3,
            name: '王五',
            age: 20
        }, {
            id: 4,
            name: '赵六',
            age: 20
        }
    ]
    let tbElement = document.querySelector('tbody');
    //  遍历数组   一个对象  创建tr节点    对象中有几个属性  td
    students.forEach(student => {
        // 创建tr 对象
        let rowElement = document.createElement('tr');
        //遍历对象  属性  td
        for (let key in student) {
            let cellElement = document.createElement('td');
            // td 添加内容  <td>zhangsan</td>
            cellElement.innerText = student[key]
            // cellElement -> rowElement
            rowElement.appendChild(cellElement)
        }

        // rowElement  -> tbody
        tbElement.appendChild(rowElement)
    })

</script>

</body>
</html>
